/**
 * 7.需求: 鼠标移入菜单(toggle-login a)
 *         为当前菜单添加激活样式
 *         显示当前菜单对应的内容(login-box box01)
 */

 tabCard('.toggle-login a', '.login-box .box01')

 /* 
     验证账号登录  用户名/手机号/邮箱  密码  如果成功点击登录按钮提交到首页 home.html
 */
 //获取元素
 let userName = document.querySelector('#username')//用户名
 let userBtn = document.querySelector('.user-btn')//用户名图标
 let tNameSpan = document.querySelector('.test .name-alert')//用户名图标
 //console.log(userBtn);
 let password = document.querySelector('#password')//密码
 let pwdBtn = document.querySelector('.pwd-btn')//密码图标
 let tPwdSpan = document.querySelector('.test .pwd-alert')//密码图标
 //console.log(pwdBtn);
 let testBtn = document.querySelector('#test-btn')//登录
 
 // 输入用户名手机号验证内容是否大于0，显示背景图 loginIcon.png 否则隐藏
 userName.addEventListener('input',function(){
     //判断用户值是否大于0
     //console.log(1);
     if(userName.value > 0){
         userBtn.style.display = 'block' //显示
     }else{
         userBtn.style.display = 'none' //隐藏
     }
 })
 
 // 点击用户名图标 清空内容
 userBtn.addEventListener('click',function(){
     userName.value = ''
 })
 // 点击密码图标 清空内容
 pwdBtn.addEventListener('click',function(){
     password.value = ''
 })
 
 //判断输入的密码大于0显示图标，否则隐藏图标
 password.addEventListener('keyup',function(){
     //console.log(1);
     if(password.value >0){
         pwdBtn.style.display = 'block' //显示
     }else{
         pwdBtn.style.display = 'none' //隐藏
     }
 })
 /* 定义正则表达式 */
     //验证手机号码是否合法
     let userReg = /^(13[0-9]|14[01456879]|15[0-3,5-9]|16[2567]|17[0-8]|18[0-9]|19[0-3,5-9])\d{8}$/;
     //创建密码验证——正则表达式
     let pwdReg = /^[0-9]{6}$/ //6位数字
 
 /* 
     手机号失去焦点时 blur，验证手机号是否合适 //使用正则表达式
 */
 
 userName.addEventListener('blur',function(){
     //用 userReg 验证手机号是否合法
     let bool = userReg.test(userName.value)
     //console.log(bool);
     if (bool) {
         //提示内容为空
         tNameSpan.textContent = ''
     } else {
         //提示内容为 
         tNameSpan.textContent = '请输入正确的手机号码'
     }
 })
 
 /* 
     密码失去焦点时，验证手机号是否合适
 */
 password.addEventListener('blur', function () {
     //用 userMsg 验证内容是否合法
     let bool = pwdReg.test(password.value)
     //console.log(bool);
     if (bool) {
         //提示内容为空
         tPwdSpan.textContent = ''
     } else {
         //提示内容为 
         tPwdSpan.textContent = '请输入6位数字的密码'
     }
 })
 
 //点击登录按钮  验证手机密码是否合格
 testBtn.addEventListener('click',function(){
     //验证用户名
     // console.log(1);
     if(!userReg.test(userName.value)){
         //提示内容为 
         tNameSpan.textContent = '请输入正确的手机号码'
     }else if(!pwdReg.test(password.value)){
         //提示内容为 
         tPwdSpan.textContent = '请输入6位数字的密码'
     }else{
         textContent = '登录成功'
         location.href = '../page/home.html'
     }
     
 
 })